<template>
  <div>
    <div class="login-wrap" v-if="isShow">
      <div class="login-cover"  >  <!--@click="closeMyself"-->
        <div class="login-content">
          <p class="login-close" @click="closeMyself" >X</p>
           <slot>empty</slot>   <!--插槽-->
        </div>
      </div>
    </div>
  </div>
</template>


<script>
  export default {
    props: {
    isShow: {    //  声明isShow
        type: Boolean,
        default: false   //默认关闭
      }
    },
    data ()  {
      return {

      }
    },
    methods: {
      closeMyself () {
        this.$emit('on-close')
      }
    }
  }

</script>


<style scoped>
  .login-wrap {
    position: fixed;
    width:100%;
    height:100%;
  }
  .login-cover  {
    /*background: #000;*/
    /*opacity: .3;   !*透明度*!*/
    background:rgba(0,0,0, 0.3);
    position: fixed;
    z-index:5;
    top:0;
    left:0;
    width:100%;
    height:100%;
  }
  /*.login-content {*/
  /*width: 50%;*/
  /*position: fixed;*/
  /*max-height:50%;*/
  /*overflow: auto;*/
  /*background-color: #fff;*/
  /*top:20%;*/
  /*left:50%;*/
  /*margin-left: -25%;*/
  /*z-index: 10;*/
  /*border: 2px solid  #464068;*/
  /*padding:2%;*/
  /*line-height: 1.6;*/
  /*}*/
  .login-close {
    position: absolute;
    text-align: center;
    line-height: 40px;
    /*!*right:8px;*!*/
    /*!*top: -12px;*!*/
    /*text-align: right;*/
    width: 40px;
    height:40px;
    margin-top: 5px;
    margin-left: 820px;
    padding: 0 auto;
    cursor: pointer;/*鼠标经过时呈现为手指*/
    background-color: lightgrey;
    border-radius:50%;
  }
  .login-close:hover{
    background-color: red;
    border-radius:50%;
  }
  #box{
    /*position: absolute;*/
    margin:40px auto;
    clear: both;
    z-index: 100;
  }
  #signin-form{
    margin:0 auto;
    padding-bottom: 20px;
    width:400px;
    height:auto;
    border-radius:5px;
    z-index: 100;
    background-color: #fff;
    text-align: center;
    /*background:rgba(255,255,255, 0.2);*/
    /*margin: 100px auto;*/
  }
  #signin-form::after {
    content: '';
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -21px;
    border-top-left-radius: 4px;
    /*border-left: 2px solid rgba(255,255,255, 0.3);*/
    /*border-top: 2px solid rgba(255,255,255, 0.3);*/
    transform: rotate(45deg);
    /*box-shadow: inset 1px 0 0 rgba(255,255,255,0.2), inset 0 1px 0 rgba(255,255,255,0.2);*/
  }
  #signin-form::before {
    content: '';
    display: block;
    width: 400px;
    height: 2px;
    position: absolute;
    /* margin: -199px 199px; */
    border-top-left-radius: 4px;
    /* transform: rotate(90deg); */
    /*box-shadow: inset 171px 0 0 0 rgba(255,255,255, 0.2), inset -171px 0 0 0 rgba(255,255,255, 0.2);*/
  }
  #loginbtn-form{
    color: #fff;
    display: inline-block;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    line-height: 1.42857143;
    border-radius: 0;
    -webkit-user-select: none;
  }
  #loginbtn-form{
    width: 300px;
    height: 40px;
    background-color: lawngreen;
    border-color: green;
    margin-top: 20px;
  }
  #loginbtn-form:hover{
    color: #fff;
    background-color: lightgreen;
    border-color: green;
    text-decoration: none;
  }
  #input-form1,#input-form{
    width: 300px;
    height: 40px;
    background-color:#fcc775;
    font-size: 16px;
  }
  #signup{
    font-size: 14px;
    color: rgb(71, 60, 60);
  }
  #signup:hover{
    color: red;
  }
</style>

<!--<style scoped>-->
  <!--.login-wrap {-->
    <!--position: fixed;-->
    <!--width:100%;-->
    <!--height:100%;-->
  <!--}-->
  <!--.login-cover  {-->
    <!--background-color: #000;-->
    <!--background-color: rgba(0,0,0,0.2);-->
    <!--/*filter:Alpha(opacity=50);*/-->
    <!--/*opacity: 0.5;   !*透明度*!*/-->
    <!--position: fixed;-->
    <!--z-index:5;-->
    <!--top:0;-->
    <!--left:0;-->
    <!--width:100%;-->
    <!--height:100%;-->
  <!--}-->
  <!--.login-content {-->
    <!--background-color: rgba(255,255,255,0.3);-->
    <!--width: 50%;-->
    <!--position: fixed;-->
    <!--max-height:80%;-->
    <!--overflow: auto;-->
    <!--/*background-color: #fff;*/-->
    <!--top:20%;-->
    <!--left:50%;-->
    <!--margin-left: -25%;-->
    <!--z-index: 10;-->
    <!--border: 2px solid  #464068;-->
    <!--padding:2%;-->
    <!--line-height: 1.6;-->
  <!--}-->
<!--.login-close {-->
  <!--position: absolute;-->
  <!--right:8px;-->
  <!--top: -12px;-->
  <!--width: 20px;-->
  <!--height:20px;-->
  <!--text-align: center;-->
  <!--cursor: pointer;-->
<!--}-->


<!--</style>-->
